<template>
	<view>
		<view class="top">
			<image class="topImg" mode="aspectFill" :src="topImg"></image>
			<!-- <view class="topTitle flexColumn flexJusCenter">
				<view class="title">PDF雷达锁</view>
				<view class="subTitle">为千万内容创作者提供内容保护，内容安全分享 拷贝</view>
			</view> -->
		</view>
		<view class="details">
			<view class="contactTitle">
				<view>联系我们</view>
				<view class="xian"></view>
			</view>
			<view class="contactWay">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
				<view class="contactWayTitle">联系方式</view>
				<view class="flex mt-20">
					<view class="nameTitle">联系人</view>
					<view class="nameSubTitle">{{content.contacts}}</view>
				</view>
				<view class="flex mt-20">
					<view class="nameTitle">电子邮件</view>
					<view class="nameSubTitle">{{content.email}}</view>
				</view>
				<view class="mt-20" style="display: flex;">
					<view class="nameTitle">微信号</view>
					<image class="wechat" :src="content.wechat_qcode"></image>
				</view>
				<view class="contactWayTitle">联系地址</view>
				<view class="mt-20" style="display: flex;">
					<view class="nameTitle">公司地址</view>
					<view class="nameSubTitle" style="width: 510rpx;">{{content.address}}</view>
				</view>
			</view>
			<view class="leaveWord">
				留言咨询
			</view>
			<view class="box margin-30">
				<view class="inputTitle">姓名</view>
				<view class="input">
					<input placeholder="请输入您的姓名" v-model="name" />
				</view>
			</view>
			<view class="box margin-30">
				<view class="inputTitle">联系方式</view>
				<view class="input">
					<input placeholder="请输入您的电话" type="number" v-model="phone" maxlength="11" />
				</view>
			</view>
			<view class="box margin-30">
				<view class="inputTitle">留言</view>
				<view class="input">
					<textarea placeholder="请输入留言内容" v-model="leavecontent"></textarea>
				</view>
			</view>
			<view class="submit" @click="submit">马上提交</view>
			<view class="companyInfo">
				<image src="/static/user/company.png" class="companyBg"></image>
				<view class="info">
					<view class="contactWayTitle">公司信息</view>
					<view class="infoLeft">公司名称<span class="inforight ml-40">{{content.site_name}}</span></view>
					<view class="infoLeft mt-20">公司地址<span class="inforight ml-40">{{content.address}}</span></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<footBar></footBar>
		</view>
	</view>
</template>

<script>
	import foorBar from "@/components/footBar/footBar.vue"
	export default {
		components: {
			foorBar
		},
		data() {
			return {
				content:'',
				topImg:'',
				latitude: 34.180428,
				longitude: 108.885806,
				covers: [{
					title: '',
					latitude: 34.180428,
					longitude: 108.885806,
					iconPath: '/static/user/location.png',
					callout: {
						content: '雁塔区西沣三路万科汇智中心',
						color: '#000000',
						bgColor: '#ffffff',
						fontSize: 14,
						borderRadius: 10,
						padding: 12,
						display: "ALWAYS",
						textAlign: 'center'
					}
				}],
				phone:'',
				name:'',
				leavecontent:''
			}
		},
		onShow() {
			this.getList()
		},
		methods:{
			getList(){
				let data={}
				this.api.get('api/content/init',data).then(res=>{
					if(res.code == 200){
						this.content = res.data
						this.covers[0].callout.content = res.data.address
						this.topImg = res.data.contact_picture[0]
					}
				})
			},
			submit(){
				if(!this.name){
					uni.showToast({
						title:'请输入姓名',
						icon:'none',
					})
					return
				}
				if (!(/^1\d{10}$/).test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				let data={
					mobile:this.phone,
					username:this.name,
					content:this.leavecontent
				}
				this.api.post('api/content/guestBook',data).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},700)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.top {
		position: relative;
	}

	.topImg {
		width: 100%;
		height: 403rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.topTitle {
		font-weight: 700;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		color: #fff;
		opacity: 0.8;
		margin: 0 50rpx;
		text-align: center;
	}

	.title {
		font-size: 46rpx;
	}

	.subTitle {
		font-size: 26rpx;
		font-weight: 500;
	}

	.details {
		padding-bottom: 470rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.contactTitle {
		font-size: 36rpx;
		font-weight: 700;
		margin: 40rpx;
		text-align: center;
	}

	.xian {
		border-top: 5rpx solid #FE0000;
		margin: 20rpx 300rpx;
	}

	.contactWay {
		background: #fff;
		box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx;
		padding: 20rpx;
	}

	.contactWayTitle {
		font-size: 30rpx;
		font-weight: 700;
		margin: 40rpx 0;
	}

	.nameTitle {
		width: 145rpx;
		color: #6E6E6E;
		font-size: 26rpx;
	}

	.nameSubTitle {
		font-size: 28rpx;
		color: #333;
	}

	.wechat {
		width: 170rpx;
		height: 170rpx;
	}

	.leaveWord {
		font-size: 36rpx;
		font-weight: 700;
		margin: 60rpx 30rpx 30rpx;
	}
	.box{
	}
	.inputTitle {
		font-size: 30rpx;
		color: #2C2C2C;
	}
	
	.input {
		border: 1rpx solid #616161;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}
	.submit{
		background: #BC0507;
		border-radius: 10rpx;
		padding: 15rpx 40rpx;
		font-size: 28rpx;
		color: #fff;
		margin: 30rpx 200rpx;
		text-align: center;
	}
	.companyInfo{
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.companyBg{
		width: 100%;
		height: 300rpx;
		position: relative;
		left: 0;
		right: 0;
	}
	.info{
		position: absolute;
		top:20rpx;
		bottom: 0;
		left: 60rpx;
		right: 40rpx;
	}
	.infoLeft{
		font-size: 26rpx;
		color: #6E6E6E;
	}
	.inforight{
		font-size: 26rpx;
		color: #333333;
	}
</style>